<template>
  <div class="pkg-preview">
    <span class="pkg-field">
      <el-icon><User /></el-icon>
      {{ form.receiverName || '未填写姓名' }}
    </span>
    <span class="separator">·</span>
    <span class="pkg-field">
      <el-icon><Phone /></el-icon>
      {{ form.receiverPhone || '未填写电话' }}
    </span>
    <span class="separator">·</span>
    <span class="pkg-field">
      <el-icon><MapLocation /></el-icon>
      {{ form.receiverAddress || '未填写地址' }}
    </span>
  </div>
</template>

<script setup lang="ts">
import { User, Phone, MapLocation } from '@element-plus/icons-vue';

defineProps({
  form: {
    type: Object,
    default: () => ({})
  }
});
</script>

<style scoped lang="scss">
.pkg-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: #606266;
  background: #f9fafb;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid #ebeef5;
  transition: all 0.2s ease;

  &:hover {
    background: #f3f4f6;
  }

  .pkg-field {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #303133;
    font-weight: 500;

    svg {
      font-size: 16px;
      color: #909399;
    }
  }

  .separator {
    color: #dcdfe6;
  }
}
</style>
